<template>
  <div class="setting">
    <div class="container">
      <div class="opt">
        <div class="opt-title">页面宽度设置</div>
        <el-row :gutter="10">
          <el-button @click="changeMaxWidthFn('100%')" type="primary" plain>通栏显示(100%)</el-button>
          <el-button @click="changeMaxWidthFn('1600px')" type="primary" plain>1600px</el-button>
          <el-button @click="changeMaxWidthFn('1400px')" type="primary" plain>1400px</el-button>
          <el-button @click="changeMaxWidthFn('1200px')" type="primary" plain>1200px</el-button>
        </el-row>
      </div>

      <div class="opt">
        <div class="opt-title">字体大小设置</div>
        <el-row :gutter="10">
          <el-button @click="changeFontSizeFn('16px')" type="primary" plain>默认字体大小(16px)</el-button>
          <el-button @click="changeFontSizeFn('18px')" type="primary" plain>18px</el-button>
          <el-button @click="changeFontSizeFn('22px')" type="primary" plain>22px</el-button>
          <el-button @click="changeFontSizeFn('24px')" type="primary" plain>24px</el-button>
        </el-row>
      </div>

      <div class="opt">
        <div class="opt-title">字体类型设置</div>
        <el-row :gutter="10">
          <el-button @click="changeFontFamilyFn('Arial, Helvetica, sans-serif')" type="primary" plain>默认字体</el-button>
          <el-button @click="changeFontFamilyFn('宋体')" type="primary" plain>宋体</el-button>
          <el-button @click="changeFontFamilyFn('黑体')" type="primary" plain>黑体</el-button>
          <el-button @click="changeFontFamilyFn('微软雅黑')" type="primary" plain>微软雅黑</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(newRoute) {
        this.$store.commit("addTab", newRoute)
      }
    }
  },
  methods: {
    // 修改界面宽度
    changeMaxWidthFn(value) {
      this.$store.commit("changeMaxWidth", value)
      this.$message.success('页面宽度已设置为: ' + value)
    },
    // 修改界面字体大小
    changeFontSizeFn(value) {
      this.$store.commit("changeFontSize", value)
      this.$message.success('字体大小已设置为: ' + value)
    },
    // 修改界面字体类型
    changeFontFamilyFn(value) {
      this.$store.commit("changeFontFamily", value)
      this.$message.success('字体类型已设置为: ' + value)
    }
  }
}
</script>


<style lang="less" scoped>
.setting {
  padding: 50px;

  .opt {
    padding-top: 20px;
    margin-bottom: 30px;

    .opt-title {
      font-weight: bold;
      margin-bottom: 15px;
      color: #303133;
      font-size: 16px;
    }
  }
}
</style>
